---
title: <AccountSettingsCards />
---

The `<AccountSettingsCards />` component provides a convenient plug-and-play UI for managing user account information. It displays all account-related settings such as avatar, name, username, email, and any custom additional fields you've configured.

This component automatically leverages the account features you have enabled via the [`<AuthUIProvider />`](/components/auth-ui-provider) and provides a seamless account settings UI out of the box.

<img alt="Settings Cards" src="/screenshots/settings-cards-dark.png" className="rounded-xl hidden dark:block w-lg mt-0 mb-0" />
<img alt="Settings Cards" src="/screenshots/settings-cards-light.png" className="rounded-xl dark:hidden w-lg mt-0 mb-0" />

## Using AccountSettingsCards

The `<AccountSettingsCards />` component is perfect for building custom account/settings pages. It can be used standalone or combined with other settings components:

```tsx title="app/account/settings/page.tsx"
import { AccountSettingsCards } from "@daveyplate/better-auth-ui"

export default function SettingsPage() {
  return (
    <div className="flex justify-center py-12 px-4">
      <AccountSettingsCards className="max-w-xl" />
    </div>
  )
}
```

---

## Using with AccountView

For a complete account management UI with navigation, use the [`<AccountView />`](/components/account-view) component instead. It includes `<AccountSettingsCards />` along with security settings, API keys, and organizations (if enabled):

```tsx title="app/account/page.tsx"
import { AccountView } from "@daveyplate/better-auth-ui"

export default function AccountPage() {
  return (
    <div className="container mx-auto py-12 px-4">
      <AccountView />
    </div>
  )
}
```

---

## Customization Options

You can customize the UI extensively by passing TailwindCSS classes or customizing provided class names through the `classNames` prop.

### Customizing Styles with classNames

Using Tailwind utility classes, you can fully customize all card states. Here's an example to illustrate significant styling customization:

```tsx
<AccountSettingsCards
  className="max-w-xl mx-auto"
  classNames={{
    card: {
      base: "border-blue-500",
      header: "bg-blue-50",
      title: "text-blue-600 text-xl",
      description: "text-muted-foreground",
      content: "bg-blue-50",
      footer: "bg-blue-500/5",
      button: "text-white bg-blue-600 hover:bg-blue-700",
      input: "bg-background placeholder:text-muted-foreground/50"
    }
  }}
/>
```

### Settings Included in AccountSettingsCards

- **Avatar** (if `avatar` prop is configured in AuthUIProvider)
- **Username** (if username plugin is enabled via `credentials.username`)
- **Name** (if included in `account.fields`)
- **Email** (if `changeEmail` is enabled)
- **Additional Custom Fields** (any fields specified in `account.fields`)
- **Accounts** (if multi-session is enabled)

#### Custom Additional Fields

The `<AccountSettingsCards />` component displays any custom `additionalFields` you've configured via the `account.fields` prop of the `<AuthUIProvider />`:

```tsx title="app/providers.tsx"
<AuthUIProvider
  authClient={authClient}
  additionalFields={{
    age: {
      label: "Age",
      placeholder: "Your age",
      description: "Please enter your age",
      required: true,
      type: "number",
    },
    newsletter: {
      label: "Receive our newsletter",
      description: "Subscribe to receive newsletters.",
      required: false,
      type: "boolean",
    }
  }}
  account={{
    fields: ["image", "name", "age", "newsletter"]
  }}
>
  {children}
</AuthUIProvider>
```

These custom fields will appear alongside the existing account setting cards automatically.

---
